<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
				></pure-textarea>
			</pj-demo>

			<!-- 自动增高 -->
			<pj-demo title="自动增高">
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
					autoHeight
				></pure-textarea>
			</pj-demo>

			<!-- 统计字数 -->
			<pj-demo title="统计字数">
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
					autoHeight
					total
				></pure-textarea>
				<pure-gap></pure-gap>
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
					autoHeight
					total
					:maxlength="100"
				></pure-textarea>
			</pj-demo>

			<!-- 可清空 -->
			<pj-demo title="可清空">
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
					autoHeight
					total
					clearable
				></pure-textarea>
			</pj-demo>

			<!-- 禁用状态 -->
			<pj-demo title="禁用状态">
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
					autoHeight
					total
					clearable
					disabled
				></pure-textarea>
			</pj-demo>

			<!-- 只读状态 -->
			<pj-demo title="只读状态">
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
					autoHeight
					total
					clearable
					readonly
				></pure-textarea>
			</pj-demo>

			<!-- 聚焦状态 -->
			<pj-demo title="聚焦状态">
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
					autoHeight
					total
					clearable
					focus-type="border-all"
				></pure-textarea>
				<pure-gap></pure-gap>
				<pure-textarea
					placeholder="请输入内容"
					v-model="content"
					autoHeight
					total
					clearable
					focus-type="border-bottom"
					style="border-radius: 0"
				></pure-textarea>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";
	const content = ref("你好");
</script>

<style lang="scss" scoped>
	.page {
		--page-layout-background: var(--pure-background-default);
	}
</style>
